<template>
	<view class="container">
		<view class="top-view">
			<view class="">
				<view class="top-wc">
					<text>您好，</text>
				</view>
				<view class="top-name">
					<text>XX科技有限公司</text>
				</view>
			</view>
			<view class="">
				<image src="/static/images/Notification.png" alt="" />
			</view>
		</view>
		<view class="top-search">
			<img src="/static/images/icon_search.png" alt="" />
			<input type="text" placeholder="开始寻找你梦寐以求的工作..."></input>
		</view>
		<view class="swiper">
			<swiper  :autoplay="true" :interval="3000" :duration="1000" next-margin="70rpx">
				<swiper-item>
					<view class="swiper-item">
						<img src="/static/images/swiper/img1.png" alt="" />
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<img src="/static/images/swiper/img2.png" alt="" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="home-tab">
			<home-tab></home-tab>
		</view>
		<view class="home-list">
			<view class="disSb">
				<text>为你推荐</text>
				<text style="font-size:27.52rpx ;color: rgba(253, 119, 83, 1);margin-left: 30rpx;">查看全部</text>
			</view>
			<company-list></company-list>
		</view>
		<view class="home-list">
			<view class="disSb">
				<text>热门职位</text>
				<text style="font-size:27.52rpx ;color: rgba(253, 119, 83, 1);margin-left: 30rpx;">查看全部</text>
			</view>
			<CompanyList></CompanyList>
		</view>
		<view class="home-content">
			<view class="disSb">
				<text>最新职位</text>
				<text style="font-size:27.52rpx ;color: rgba(253, 119, 83, 1);margin-left: 30rpx;">查看全部</text>
			</view>
			<CompanyListContent  
			   v-for="item in list" 
			  :key="item.objectId"
			  :companyData="item"></CompanyListContent>
		</view>
		<view class="home-bootom">
			<view class="disSb">
				<text style="font-size:32.11rpx;color: rgba(40, 33, 31, 1);">最受关注</text>
				<text style="font-size:27.52rpx ;color: rgba(253, 119, 83, 1);margin-left: 30rpx;">查看全部</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import HomeTab from '../../components/home-tab.vue';
import CompanyList from '../../components/company-list.vue';
import CompanyListContent from '../../components/company-list-content.vue'
import http from '../../utils/request';
import { ref } from 'vue';
import type { CompanyType } from '../../model/company';
 //    const list=ref<Array<CompanyType>>([])
	// let skip = Math.floor(Math.random()*15 + 5)
	// http.get('/classes/company',{
	// 	params:{
	// 		limit:6,
	// 		skip
	// 	}
	// }).then(res=>{
	// 	console.log('三方库获取数据',res);
	// 	list.value=res.data.results
	// })
</script>

<style lang="scss">
.container{
	background-color: #fff;
}
.top-view{
	height:128.44rpx;
	width: 100%;
	display: flex;
	padding: 0 40rpx;
	justify-content: space-between;
	align-items: center;

}
.top-wc{
	color: #666E7A;
	font-size: 27.52rpx;
}
.top-view .top-name{
	color: #28211F;
	font-size: 45.87rpx;
}
.top-view image{
	width: 64.22rpx;
	height: 71.1rpx;
}
.top-search{
	height: 110.09rpx;
	margin: 30rpx 40rpx;
	display: flex;
	align-items: center;
	border: #EEEEEE 4rpx solid;
	border-radius: 10rpx;
	padding: 10rpx 20rpx;
}
.top-search img{
	width: 45.87rpx;
	height: 45.87rpx;
}
.top-search input{
	height: 55.05rpx;
	width: 612.39rpx;
	margin-left: 16rpx;
}
.swiper{
	height: 366.97rpx;
	margin-left:40rpx;
}
.swiper-item{
	height: 100%;
}
.swiper-item img{
	height: 366.97rpx;
	width: 582.57rpx;
	object-fit: cover; /* 保持比例填充 */
}
.home-tab{
	width: 747.71rpx;
	height: 293.58rpx;
}
.home-list{
	margin-left: 40rpx;
	margin-top: 40rpx;
}
.home-list text{
	font-size:32.11rpx;
	color: rgba(40, 33, 31, 1);
}
.disSb{
	display: flex;
	justify-content: space-between;
	width: 690rpx;
	margin-bottom: 20rpx;
}
.home-content {
	margin-left: 40rpx;
	margin-top: 40rpx;
}
.home-content text{
	font-size:32.11rpx;
	color: rgba(40, 33, 31, 1);
}
.home-bootom{
	margin:0 30rpx;
}
</style>
